<template>
  <div class="find-car page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- title="我的爱车"  -->
   <!--  <van-nav-bar
    fixed
    placeholder
    :border='false'
    right-text="添加"
    @click-right="goAdd(0)"
    > -->
      <!-- <template #left>
        <van-icon name="arrow-left" size="18"  @click="goback()"/>
      </template> -->
    <!-- </van-nav-bar> -->

    <navbar :title="title" :rightText="rightBut"></navbar>
    <div class="page_pos_scroll" :style="{ top: `${phoneStatusBarHeight}`,marginTop:'12vw'}">

    <!-- <div class="flex-box  add center" @click="goAdd" v-if="!$route.query.id"></div> -->
      <div
      class="find-car-item-recode"
      v-for='(item,index) in userOrder'
      :key='index'
      @click="editLovelyCar(item)"
      >
        <myCaritem :orderMsg='item' @click="editLovelyCar(item)"></myCaritem>
      </div>
      <div class="btn_vant"  @click="goAdd(0)" v-show="bigAddShow">
        <van-icon name="plus" />
      </div>
    </div>
  </div>
</template>

<script>
  import myCaritem from '@/components/common/myCaritem'
  import { getMyLovelyCar } from './api'
  export default{
	  name:'List',
    components: {
      myCaritem,
    },
    data() {
      return {
        // header栏 => 标题
        title:"我的爱车",
        // 添加按钮
        rightBut: '',
        userOrder: [],
        bigAddShow: true,
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:''
      }
    },
    methods: {
      goback() {
        this.$router.push({name: 'PersonalCenter'})
      },
      goAdd(){
        this.$router.push({
          name:'addCar',
          query: {
            status: 0 // 0为添加
          }
        })
      },
      // 查询我的爱车
      async getData() {
        const {data} = await getMyLovelyCar()
        // console.log(data.list)
        this.userOrder = data.list
        if(this.userOrder.length === 0) {
          this.bigAddShow = true
          this.rightBut = ''
        } else {
          this.bigAddShow = false
          this.rightBut = '添加'
        }
      },
      // 跳转到编辑
      editLovelyCar(item) {
        // console.log(item)
        this.$router.push({
          name:'addCar',
          query: {
            status: 1, // 1为编辑
            id:item.id
          }
        })
      },
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      }
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "我的爱车"
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
      this.getData()
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
    }
}
</script>

<style scoped lang="less">
// .find-car{
//   height: 90vh;
// }
.btn_vant{
  margin-top: 50px;
  // margin-bottom: 20px;
}
.van-pull-refresh{
  height: 92vh;overflow-y: auto;
}
  .moretext {
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin: 10px 0;
    letter-spacing: 1px;
  }

  .find-car-item-recode{
    padding: 0 16px;
    margin: 10px 0;
    background-color: white;
  }
  .find-car-item {
    margin-top: 8px ;
    // padding: 0 16px;
  }
</style>
<style lang="less">
  .van-nav-bar .van-icon {
    color: #000000 !important;
  }
  .van-nav-bar__title {
    font-size: 17px !important;
    font-family: PingFangSC-Semibold, PingFang SC !important;
    font-weight: 600 !important;
    color: #000000 !important;
  }
</style>
<style scoped lang="less">
	/deep/ .add{
			padding:4rem;
			width: 100%;
			background: white;
			color:#999999;
      font-size: 8rem;
		}

.btn_vant {
  background-color: white;
  font-size: 50px;
  color: rgba(0,0,0,.2);
  text-align: center;
  line-height: 100px;
  height: 100px;
  position: fixed;
  top: 15vw;
  left: 3vw;
  right: 3vw;
}
</style>
